<template>
	<view class="wrap-user-info flex align-center just-between">
		<wrapAvatar 
			class="avatar-bg"
			:src="userInfo ? userInfo.avatar : ''" 
			:auth="userInfo ? userInfo.behoy_auth : ''" 
			@click="onPersonalInfo" 
		/>

		<view class="user-content flex column">
			<block v-if="userInfo">
				<view class="nickname-iden flex align-center">
					<view class="nickname limit-num-line fBold f-36">{{ userInfo.nickname }}</view>
					
					<view class="iden-title f-26" v-if="userInfo.behoy_partner > 0">
						{{ userInfo.behoy_name }}
					</view>
				</view>

				<view class="iden-time f-26" v-if="userInfo.behoy_partner > 0">
					到期时间:{{ userInfo.expiration_time }}
				</view>
			</block>

			<block v-else>
				<view class="nickname fBold f-36" @click="onLogin">注册/登录</view>
			</block>
		</view>

		<view class="options flex align-center">
			<view class="item flex column align-center just-center" @click="onCustome">
				<image class="img" :src="$staticImagePath('mine/custome.png')" />

				<view class="name f-18">联系客服</view>
			</view>

			<!-- <view class="item flex column align-center just-center" @click="onSetting">
				<image class="img" :src="$staticImagePath('mine/setting.png')" />

				<view class="name f-18">设置</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import wrapAvatar from '@/components/common/avatar.vue';
	export default {
		components: {
			wrapAvatar
		},
		props: {
			userInfo: {
				type: Object,
				default: null,
			},
		},
		data() {
			return {};
		},
		methods: {
			/**
			 * 个人信息
			 */
			onPersonalInfo() {
				this.$jump.to("/pages/mine/setting/userInfo");
			},
			/**
			 * 登录
			 */
			onLogin() {
				this.$filters.isLogin();
			},
			/**
			 * 客服
			 */
			onCustome() {
				this.$jump.to("/pages/user/service");
			},
			/**
			 * 设置
			 */
			onSetting() {
				this.$jump.to("/pages/mine/setting/setting");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-user-info {
		width: 100%;
		padding: 10rpx 0rpx;
		overflow: hidden;

		.avatar-bg {
			margin-left: 17rpx;
		}

		.user-content {
			margin-left: 20rpx;
			margin-right: 20rpx;
			flex: 1;
			overflow: hidden;
			gap: 18rpx;
			
			.nickname-iden {
				width: 100%;
				overflow: hidden;
				gap: 10rpx;
				
				.nickname {
					// flex: 1;
					max-width: 50%;
					--limit-num: 1;
					color: #000000;
				}
				
				.iden-title {
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					padding: 0 15rpx;
					box-sizing: border-box;
					overflow: hidden;
					border-radius: 20rpx;
					color: white;
					background: $theme-gradit-color;
				}
			}

			.iden-time {
				color: #666666;
			}
		}

		.options {
			overflow: hidden;
			gap: 60rpx;

			.item {
				width: fit-content;
				gap: 12rpx;

				.img {
					width: 48rpx;
					height: 48rpx;
				}

				.name {
					color: #121212;
				}
			}
		}
	}
</style>
